<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/jpeg" sizes="80x80" href="/imgs/logo.jpg" />
    <title>Preview Page</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" id="pv-title">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02"
                aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>

    <div class="container mt-3">
        <div id="app">

        </div>
    </div>


    <!-- <script src="/cdn/bootstrap/bootstrap.min.js"></script>
    <script src="/cdn/bootstrap/popper.min.js"></script> -->

    <script src="/cdn/vue/vue.min.js"></script>
    <script src="/cdn/base64.js"></script>
    <script src="/cdn/require.min.js"></script>

    <link href="/cdn/bootswatch/bootstrap.morphme.min.css" rel="stylesheet" />


    <script>

        window.onload = () => {
            let title = location.href.split("p=")[1];
            document.querySelector("#pv-title").innerHTML = title.substr(0, 1).toUpperCase() + title.substr(1);
        };

        let cacheKeyList = [];
        let gitee = {
            loadFile(file, call, repo = "webdata") {
                cacheKeyList.push(file);
                let storageKey = `${repo}#${file}`;
                let cacheKey = `${repo}#@${file}`;
                let cache = localStorage.getItem(cacheKey);
                if (cache) {
                    call && call(cache);
                    return;
                }
                let storage = localStorage.getItem(storageKey);
                if (storage) {
                    call && call(storage);
                    return;
                }
                fetch(`https://gitee.com/api/v5/repos/yanhui2018/${repo}/contents/${file}`)
                    .then(res => res.json())
                    .then(data => {
                        let content = data.content;
                        let decodeJson = base64.decode(content);
                        content && localStorage.setItem(storageKey, decodeJson);
                        call && call(decodeJson);
                    }).catch(e => {
                        // location.href = "/login.html";
                    });
            }

        };
        let filename = location.search.split("=")[1];
        document.title = filename;
        let runFile = `pages/${filename}.js`;
        gitee.loadFile(runFile, (content) => {
            start(content);
        });

        function start(data) {
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.append(data);
            document.body.appendChild(script);
        }

        function removeCache(repo = "webdata") {
            for (let cacheKey of cacheKeyList) {
                localStorage.removeItem(`${repo}#${cacheKey}`);
                localStorage.removeItem(`${repo}#@${cacheKey}`);
            }
        }

        document.onkeydown = function (e) {
            let { ctrlKey, key } = e;
            if (ctrlKey && key === 'd') {
                // clear cache
                removeCache();
                alert("Clear Cache Success!");
                return false;
            }
        }

    </script>

</body>

</html>